Mark Wood's profile

Drawing In Perspective…

Creating 3D Visuals Using Adobe Illustrator’s Perspective Drawing Tools
Versions effected CS5, CS5.5, CS6 and CC.
Introduction
Illustrator CS5 introduced new tools for perspective drawing. The language for Perspective Drawing comes from engineering and architecture. It is system of 2D drawing that has its origins in the 15th Century, and is not in the strictest sense of the term – 3D, unlike the Extrude & Bevel, Revolve and Rotate tools found in Illustrator.
 
This tutorial uses a real–world scenario to explore how to set up a Perspective Grid, draw directly on to the Grid, then map existing artwork in a perspective plane. Packaging artwork is often created using Illustrator. Beyond the creation of visuals, perspective drawing can lead to new ways to develop logos and icons that play on the ambiguity of 2D space.
 
Using 2D artwork to make a 3D visuals has been a convoluted process that required CAD skills and extra software. Let’s take a look at what Illustrator can now do.
 
1. Arrange Your Workspace
Let’s start this tutorial by creating a new blank document. So, File > New and in the New Document window choose Print from the New Document Profile menu and A4, in landscape, will work well. Next set the Workspace; chose Window > Workspace > Essentials, here the Panels have been expanded. Then from View > Perspective Grid, chose Show Grid.
2. Set Your Grid
The menu various options found under Perspective Grid allow us to Define Grid…, you may find you visit here just to change the opacity of the grid. Rather than key in parameters here, we’ll use the Perspective Grid Tool to set the grid. Though do note the option to save customised grids for future use, if you so wish.
3. Perspective Grid Tool
Students of technical drawing will understand One Point, Two Point and Three Point Perspective. We’ll stick with the default of Two Point. Configure this grid using the Perspective Grid Tool. This is in the Tools panel. Hovering the cursor will cause the Tool labels to appear. Use Tearoff, so Perspective Grid and the Perspective Selection Tool become a floating palette.
4. Changing Perspective
The default perspective won’t suit our needs. Let’s change it. Make sure you have Perspective Grid Tool selected. Note a lot of handles have appeared all over the Perspective Grid. If you click and drag a few handles you’ll see what they do. The Horizon line is the higher of the two lines with diamonds at the end, move this upward.
5. Adjusting the Vanishing Points
Zoom out so there’s space around the document. This is needed to set a reasonable perspective. The Horizon Line has two circular handles. Click–drag these outwards to make the grid look more box-like. The second, lower line with diamond handles is used to position the grid on the art board. The down facing target–like handle will move the Ground Level.
6. Scaling The Grid
Here we’ve zoomed in to take a closer look at the grid. On the right of the art board are three handles. The uppermost of these controls the Grid Cell Size. Adjusting this will help drawn elements to Snap To Grid, though there maybe times when you need to position freely. Perspective Grid has its own Snap to Grid option.
7. Drawing In Perspective
By default in the upper left hand corner of the screen is the Active Plane Widget. Draw a rectangle then select the Perspective Selection Tool. Use the Perspective Selection Tool to reshape the rectangle, note how the rectangle conforms to the one plane of the Perspective Grid. Hover your cursor over the Active Plane Widget, make an alternative plane active.
8. Changing Planes
Keyboard shortcuts now come in handy. Select the Rectangle Tool. Its icon looks different. It has arrows indicating on which plane a shape will be drawn. 1 is Left Grid, 2 is Horizontal Grid, 3 Right Grid and 4 allows you to draw without conforming to a grid. Toggle through these options, draw a top and side to complete your box.
9. Plane Moving
Switching on Smart Guides (View > Smart Guides) will help you select an origin for each Rectangle, and using the Perspective Selection Tool will help you refine your drawing. If you want to slide an object forward or back on its plane, as illustrated, hold down the 5 key whilst using the Perspective Selection Tool.
10. Adding A Symbol
You can map any Illustrator artwork into a Perspective Grid, though converting it into a Symbol will help you isolate that artwork as and when you need to modify it. For now let’s use a default Symbol. Drag a Symbol from its panel onto the Artboard. With the Right Grid and Perspective Selection Tool selected position and scale the Symbol.
 
 
11. Adding Text
Use the Text Tool to key in some text, and then use the Perspective Selection Tool to conform it to the Right Grid. The text appears to have automatically outlined itself, but it hasn’t. Double–clicking on the text, Illustrator uses Isolation Mode to allow you to adjust all parameters for the text.
12. Limitations 
If you now decide to modify any aspect of the Perspective Grid, say move the vanishing points, then any symbols or text you’ve used would become outlined. You can set different perspective grids on multiple artboards, but again doing this will outline symbols and fonts on the first grids you made. This may not be an issue for you.
13. A Workaround Needed
Patterns are a challenge for Perspective Drawing. If you Fill a shape with a pattern, the pattern will not conform to the Perspective Grid. Workarounds could include rasterising the pattern in Photoshop, or trying Envelope Distortion, though the later option makes for a heavily compromised look. Perhaps Adobe will address this in a future release.
14. Finishing Touches
Illustrator’s Perspective Drawing is not 3D Modelling. As such there are no lighting effects. To add extra dimension to your drawing try adding a gradient fill to one side of the box. Here the Convert Direction Point Tool has been used to bend the box lid for added authenticity and a shadowy blue fill under the lid suggests a box flap.
Drawing In Perspective…
Published:

Drawing In Perspective…

This tutorial uses a real–world scenario to explore how to set up a Perspective Grid in Adobe Illustrator and draw directly on to the Grid, then Read More

Published: